<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_higd'>
					<view class='flex flex-wrap align-center fd0_0_c0_higd' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='fd0_0_c1_c0_higd'>{{title}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="lists" :class="isLandscape ? 'landscape-mode' : 'landscape'">
				<view class="flex benben-flex-layout flex-wrap align-center flex_1_higd">
					<view style="width: 100%;">
						<view class="benben-table-content" style="width: 100%;">
							<view class='benben-flex-table-x otherTablefd1_0_higd' :style="{'width':`100%`}"
								v-if="list.length>0 && isshow">

								<view class='benben-flex-table-head headfd1_0_c0_higd'>

									<view v-for="(item,index) in nav" :key='index'
										class='benben-flex-table-cell align-center justify-center '
										:class="(type==1||type==3)?'nav25':'nav20'">
										<text>{{item}}</text>

									</view>
								</view>
								<scroll-view scroll-y scroll-x :class="isLandscape ? 'landscape-modes' : 'landscapes'">
									<template v-for='(item,key0) in list' v-if="type==1 || type==3">
										<view class='benben-flex-table-row rowfd1_0_c1_higd'>

											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higd'>
												<text>{{type==1?item.grade_name:item.base_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higd'>
												<text>{{type==1?item.name:item.real_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higd'>
												<text>{{type==1?item.course_name:item.name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higd'>
												<text>{{type==1?item.avg_score:item.score}}</text>

											</view>



										</view>
									</template>
									<template v-for='(item,key0) in list' v-if="type==2 || type==4">
										<view class='benben-flex-table-row rowfd1_0_c1_higd'>

											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higds'>
												<text>{{type==4?item.user_real_name:item.grade_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higds'>
												<text>{{type==4?item.course_name:item.department_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higds'>
												<text>{{type==4?item.examtask_name:item.base_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higds'>
												<text>{{type==4?item.create_time:item.course_name}}</text>

											</view>


											<view
												class='benben-flex-table-cell align-center justify-center cellfd1_0_c0_c0_higds'>
												<text>{{type==4?item.score:item.progress +'%'}}</text>

											</view>


										</view>
									</template>
								</scroll-view>

							</view>
							<view class="nolist" v-if=" list.length ==0 && isshow">
								<image :src="benbenImageSrcResolution('order.png', 'global')"></image>
								<view class="txt">暂无数据</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!---flex布局4flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center flex_5_higd"
				v-if="list.length>0 && isshow">
				<image @click="isLandscape = !isLandscape" class='fd5_0_higd' mode="aspectFit"
					:src='STATIC_URL+"006.png"'></image>
				<view @click="exportToExcel(1)" class='fd5_0_higds'>
					导出
				</view>
				<!-- 	<view  @click="exportToExcel(2)" class='fd5_0_higds'>
						下载
					</view> -->
				<!-- <image @click="exportToExcel" class='fd5_0_higd' mode="aspectFit" :src='STATIC_URL+"007.png"'></image> -->
			</view>



		</view>
	</page-body>
</template>
<script>
	import filePreview from '@/common/utils/filePreview.js'
	import XLSX from '@/node_modules/xlsx/xlsx.js';
	// import XLSX from 'https://aixf.zhuaizhuaiyu.com/h5/xlsx/xlsx.js';
	export default {
		mixins: [filePreview],
		components: {},


		data() {
			return {

				roles: '', //0 或者 1是管理员超管，教职工的是489，保安员是491
				type: 1,
				isLandscape: false,
				nav: [],
				nav1: ['年级', '院系', '课程', '平均成绩'],
				nav2: ['年级', '院系', '班级', '课程', '学习进度'],
				nav3: ['班级', '学生', '课程', '成绩'],
				nav4: ['学生', '课程', '考试', '时间', '成绩'],
				"list": [{
					"name": "张三",
					"kc": "课程一",
					"time": "",
					"fen": "85",
					"ks": ""
				}],
				tableData: [{
						name: '张三',
						age: 28,
						job: '工程师'
					},
					{
						name: '李四',
						age: 24,
						job: '设计师'
					},
					// 更多数据...
				],
				title: '',
				url: '', //接口
				listdata: [],
				isshow: false,
				uniPlatform: ''
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.type = options.type ? options.type : 1
			// 在页面中调用

			if (this.type == 1) {
				this.nav = this.nav1
				this.title = '年级平均成绩'
				this.url = global.apiUrls.post687b15612b5f8

			} else if (this.type == 2) {
				this.title = '班级学习进度'
				this.nav = this.nav2
				this.url = global.apiUrls.post687b3e718398e

			} else if (this.type == 3) {
				this.nav = this.nav3
				this.title = '班级平均成绩'
				this.url = global.apiUrls.post687b4336886bf


			} else if (this.type == 4) {
				this.nav = this.nav4
				this.title = '个人成绩'
				this.url = global.apiUrls.post687a1ea63edea

			}
			this.getlist()
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.uniPlatform = uni.getSystemInfoSync().uniPlatform;
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取列表
			async getlist() {
				//请求方法
				//数据验证

				let datacarouselMap = await this.$api.get(this.url, {
					// type: '14'
				});

				if (datacarouselMap.data.code != 1) {
					this.$message.info(datacarouselMap.data.msg);
					return
				}
				this.isshow = true
				let infocarouselMap = datacarouselMap.data;
				this.list = infocarouselMap.data

			},
			exportToExcel(types) {
				console.log(uni.getSystemInfoSync().uniPlatform)
				let uniPlatform = uni.getSystemInfoSync().uniPlatform
				if (uniPlatform != 'mp-weixin') {
					this.getbg(this.type)
					return
				}
				// 
				let fileName = this.title
				this.tableData = []
				if (this.type == 1) {
					this.list.map(item => {
						this.tableData.push({
							'年级': item.grade_name,
							'院系': item.name,
							'课程': item.course_name,
							"平均成绩": item.avg_score,
						})
					})
				} else if (this.type == 2) {
					this.list.map(item => {
						this.tableData.push({
							'年级': item.grade_name,
							'院系': item.department_name,
							'班级': item.name,
							'课程': item.course_name,
							"学习进度": item.progress + '%',
						})
					})
				} else if (this.type == 3) {
					this.list.map(item => {
						this.tableData.push({
							'班级': item.base_name,
							'学生': item.real_name,
							'课程': item.name,
							"成绩": item.score,
						})
					})
				} else {
					this.list.map(item => {
						this.tableData.push({
							'学生': item.user_real_name,
							'课程': item.course_name,
							'考试': item.examtask_name,
							"时间": item.create_time,
							"成绩": item.score,
						})
					})
				}
				console.log(this.tableData)
				let _this = this
				// return
				// 创建工作簿 
				const ws = XLSX.utils.json_to_sheet(this.tableData)
				const wb = XLSX.utils.book_new()
				XLSX.utils.book_append_sheet(wb, ws, "Sheet1")

				// 生成二进制数据
				const binary = XLSX.write(wb, {
					type: 'binary'
				})

				// 写入文件系统
				const fs = wx.getFileSystemManager()
				const filePath = `${wx.env.USER_DATA_PATH}/${fileName}.xlsx`
				fs.writeFile({
					filePath,
					data: binary,
					encoding: 'binary',
					success: () => {
						console.log(111)
						console.log(filePath)
						if (types == 2) {
							_this.down(filePath)
							return
						}

						uni.showModal({
							content: "导出的Excel文件将自动打开，请点击右上角选择‘保存到手机’进行保存",
							title: "温馨提示",
							success(res) {
								if (res.confirm) {
									wx.openDocument({
										filePath,
										showMenu: true, // 显示右上角菜单
										success: function(ress) {

										},
									})
								}
							}
						})

					}
				})

			},
			async getbg(type) {
				let info = await this.$api.get(global.apiUrls.post68a3cfc1d51bb, {
					type: type
				});

				if (info.data.code != 1) {
					this.$message.info(info.data.msg);
					return
				}
				let infos = info.data.data.path;
				let fileName=info.data.data.name
				 this.previewFile(infos, fileName)
				console.log(infos)
			},
			async down(url) {
				//请求方法
				//数据验证

				let info = await this.$api.get(global.apiUrls.post687e01535eacd, {
					file: url
				});

				if (info.data.code != 1) {
					this.$message.info(info.data.msg);
					return
				}
				let infos = info.data;
				console.log(infos)
				// this.list = infocarouselMap.data

			},

			xz() {
				wx.setScreenOrientation({
					orientation: 'landscape'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;

		.nolist {
			width: 100%;
			text-align: center;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.lists {
			padding-bottom: 24rpx;
		}

		.flex_5_higd {
			// width: 150rpx;
			// height: 50rpx;
			overflow: hidden;
			z-index: 10;
			right: 32rpx;
			bottom: calc(100rpx + var(--window-bottom));

			.fd5_0_higd {
				width: 80rpx;
				height: 80rpx;
				border-radius: 0rpx;
				// margin: 0rpx 32rpx 0rpx auto;
			}


		}

		.fd5_0_higds {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-left: 32rpx;
			color: #ffffff;
			background-color: #333333;
			text-align: center;
			line-height: 80rpx;
			// margin: 0rpx 32rpx 0rpx auto;
		}

		.flex_4_higd {
			margin: 32rpx 0rpx 0rpx 0rpx;
			padding: 0rpx 24rpx 0rpx 24rpx;

			.otherTablefd4_0_higd {
				border-color: #999;

				.headfd4_0_c0_higd {
					min-height: 50rpx;
					font-size: 32rpx;
					font-weight: 700;
				}

				.rowfd4_0_c1_higd {
					min-height: 50rpx;
				}
			}
		}

		.cellfd4_0_c0_c0_higd {
			width: 25%;
			font-size: 12rpx;
		}

		.flex_3_higd {
			margin: 32rpx 0rpx 0rpx 0rpx;
			padding: 0rpx 24rpx 0rpx 24rpx;

			.otherTablefd3_0_higd {
				border-color: #999;

				.headfd3_0_c0_higd {
					min-height: 50rpx;
					font-size: 32rpx;
					font-weight: 700;
				}

				.rowfd3_0_c1_higd {
					min-height: 50rpx;
				}
			}
		}

		.cellfd3_0_c0_c0_higd {
			width: 20%;
			font-size: 12rpx;
		}

		.flex_2_higd {
			padding: 0rpx 24rpx 0rpx 24rpx;
			margin: 32rpx 0rpx 0rpx 0rpx;

			.otherTablefd2_0_higd {
				border-color: #999;

				.headfd2_0_c0_higd {
					min-height: 50rpx;
					font-size: 32rpx;
					font-weight: 700;
				}

				.rowfd2_0_c1_higd {
					min-height: 50rpx;
				}
			}
		}

		.cellfd2_0_c0_c0_higd {
			width: 25%;
			font-size: 12rpx;
		}

		.flex_1_higd {
			margin: 32rpx 0rpx 0rpx 0rpx;
			padding: 0rpx 24rpx 0rpx 24rpx;

			.otherTablefd1_0_higd {
				border-color: #999;

				.headfd1_0_c0_higd {
					min-height: 88rpx;
					font-size: 32rpx;
					font-weight: bold;
					background-color: #ffffff;
					z-index: 6;
					border-top: 1rpx solid #eeeeee;
				}

				.rowfd1_0_c1_higd {
					min-height: 66rpx;
				}
			}
		}

		.nav25 {
			font-size: 32rpx;
			width: 25%;
			font-weight: bold;
		}

		.nav20 {
			font-size: 32rpx;
			width: 20%;
			font-weight: bold;
		}

		.cellfd1_0_c0_c0_higd {
			width: 25%;
			font-size: 24rpx;
		}

		.cellfd1_0_c0_c0_higds {
			width: 20%;
			font-size: 24rpx;
		}

		.flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.fd0_0_c0_higd {
			width: 120rpx;

			.fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	.landscape-mode {
		transform: rotate(90deg);
		transform-origin: 0 0;
		width: 100vh;
		height: 100vh;
		position: fixed;
		// bottom:0;
		top: 0;
		left: 100vw;
		overflow-y: auto;


		//   position: absolute;
		//   top: 100%;
		//   left: 0;

		// background-color: red;
	}

	.landscape-modes {
		height: 80vw;
	}

	.landscapes {
		min-height: 80vh;
	}

	.landscape {
		overflow-x: auto;
		width: 100vw;
		height: 100vh;
		transition: all 0.3s;
		// background-color: pink;
		// width: 100vw;
		// height: 100vh;
	}

	.benben-flex-table-x .benben-flex-table-row:last-child,
	.benben-flex-table-x .benben-flex-table-head:last-child {
		border-bottom: 1px solid;
	}
</style>
